<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:25px;">
                        <Icon type="ios-keypad"></Icon> 支付列表
                    </p>
                    <Row>
                        <Select v-model="status" style="width:200px">
                            <Option value="">请选择状态</Option>
                            <Option :value="1" >未支付</Option>
                            <Option :value="2" >已支付</Option>
                            <Option :value="3" >取消</Option>
                        </Select>
                        <Input v-model="keywords" placeholder="请输入关键词..." style="width: 200px" />
                        <Date-picker type="daterange" @on-change="formatDate" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                        <span @click="getList" style=""><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="getList" type="ghost" >取消</Button>
                    </Row>
                    <p style="height: 15px;"></p>
                    <div>
                        <div>
                            <Table stripe :columns="columns" :data="rows" border></Table>
                        </div>
                        <div style="margin-top:10px;text-align: center;">
                             <Page :total="total" :page-size="per_page" :current="1" @on-change="changePage" ></Page>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'getList',
    components: {
        // canEditTable //组件名称，需要import
    },
    data () {
        return {
            status:null,
            keywords: '',
            daterange:[],
            rows: [],
            current_page: 1,
            per_page: 20,
            total:0,
            total_page:1,
            columns: [
                {
                    title: 'ID',
                    align: 'center',
                    key: 'pay_id',
                    width: 80,
                }, {
                    title: '订单ID',
                    align: 'center',
                    key: 'order_id',
                    width: 80,
                }, {
                    title: '订单号',
                    align: 'center',
                    key: 'order_sn',
                    width: 150,
                }, {
                    title: '用户ID',
                    align: 'center',
                    key: 'user_id',
                    width: 80,
                }, {
                    title: '支付方式',
                    align: 'center',
                    key: 'method',
                    width: 100,
                    render: (h, params) => {
                        return params.row.method==1?'微信':'支付宝';
                    }
                }, {
                    title: '单号',
                    align: 'center',
                    key: 'trade_no',
                    width: 120,
                }, {
                    title: '总价',
                    align: 'center',
                    key: 'total_pay',
                    width: 80,
                    render: (h, params) => {
                        return params.row.total_pay/100;
                    }
                }, {
                    title: '状态',
                    align: 'center',
                    key: 'status',
                    width: 120,
                    render: (h, params) => {
                        switch (params.row.status) {
                            case 1 : return '未支付'; break;
                            case 2 : return '已支付'; break;
                            case 3 : return '取消'; break;
                        }
                    }
                }, {
                    title: '创建时间',
                    align: 'center',
                    key: 'created_at',
                    width: 120,
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {type: 'success', size: 'small'},
                                style: { marginRight: '5px'},
                                on: {
                                    click: () => {
                                        this.show(params.row.pay_id)
                                    }
                                }
                            }, '查看'),
                        ]);
                    }
                }
            ],
        };
    },
    methods: {
        getList() {
            this.$http.post('admin/order/payList', this.$qs.stringify({
                per_page : this.per_page,
                page : this.current_page,
                status : this.status,
                keywords : this.keywords,
                daterange : this.daterange,
            })).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.rows = d.data.rows;
                    this.current_page = d.data.current_page;
                    this.total = d.data.total;
                    this.total_page = d.data.total_page;
                }
            })
        },
        show (pay_id) {
            this.$http.post('admin/order/getOnePay', this.$qs.stringify({pay_id : pay_id})).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.$Modal.info({
                        title: '订单信息',
                        content: `产品：${d.data.order.name_list}<br>
                        总价：${d.data.order.total_pay/100}`
                    })
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },
        changePage (current_page) {
            this.current_page = current_page;
            this.getList();
        },
        formatDate (date) {
            this.daterange = date;
        },
    },
    created () {
        this.getList();
    }
};
</script>
